<template>
  <div class="printer-preview">
    <div class="title">小票预览</div>
    <el-alert
      :closable="false"
      title="提示：当前小票最大只适用 58mm规格"
      type="warning">
    </el-alert>

    <div class="printer-template-content">
      <div class="top">
        <div class="shop-name" v-if="obj.config.header.company == 1">店铺名称</div>
      </div>
      <div class="goods-info">

        <div class="item flex border">
          <div class="item-title" v-if="obj.config.commodity.goods.name == 1">商品名称</div>
          <div class="item-title" v-if="obj.config.commodity.goods.count == 1">数量</div>
          <div class="item-title price" v-if="obj.config.commodity.goods.money == 1">价格</div>
        </div>

        <div class="border goods-info-content">
          <div class="item-info mt-12" v-if="obj.config.commodity.goods.name == 1">
            <div class="goods-title">测试商品</div>
          </div>
          <div class="item flex">
            <div></div>
            <div class="item-info" v-if="obj.config.commodity.goods.count == 1">x1</div>
            <div class="item-info price" v-if="obj.config.commodity.goods.money == 1">￥599.00</div>
          </div>

          <div class="item-info mt-12" v-if="obj.config.commodity.goods.name == 1">
            <div class="goods-title">测试商品</div>
          </div>
          <div class="item flex">
            <div></div>
            <div class="item-info" v-if="obj.config.commodity.goods.count == 1">x1</div>
            <div class="item-info price" v-if="obj.config.commodity.goods.money == 1">￥599.00</div>
          </div>

          <div class="item-info mt-12" v-if="obj.config.commodity.goods.name == 1">
            <div class="goods-title">测试商品</div>
          </div>
          <div class="item flex">
            <div></div>
            <div class="item-info" v-if="obj.config.commodity.goods.count == 1">x1</div>
            <div class="item-info price" v-if="obj.config.commodity.goods.money == 1">￥599.00</div>
          </div>

        </div>

        <div class="border goods-info-price">
          <div class="item flex" v-if="obj.config.commodity.total == 1">
            <div class="item-info">合计</div>
            <div class="item-info" v-if="obj.config.commodity.goods.count == 1">x3</div>
            <div class="item-info price">￥1797.00</div>
          </div>
          <div class="item flex" v-if="obj.config.commodity.freight == 1">
            <div class="item-info">运费</div>
            <div class="item-info price">￥10.00</div>
          </div>
          <div class="item flex" v-if="obj.config.commodity.reduction == 1">
            <div class="item-info">优惠金额</div>
            <div class="item-info price">-￥10.00</div>
          </div>
          <div class="item flex" v-if="obj.config.commodity.pay_price == 1">
            <div class="item-info">实付金额</div>
            <div class="item-info price">￥1787.00</div>
          </div>
        </div>

      </div>

      <div class="order-info border">
        <div class="item flex" v-if="obj.config.order.order_no == 1">
          <div class="label"> 订单编号：</div>
          <div>16293500769582794302294938</div>
        </div>
        <!-- <div class="item flex">
          <div class="label">支付方式：</div>
          <div>微信支付</div>
        </div>
        <div class="item flex">
          <div class="label"> 支付渠道：</div>
          <div>微信小程序 </div>
        </div> -->
        <div class="item flex" v-if="obj.config.order.create_time == 1">
          <div class="label">下单时间：</div>
          <div>2020-05-02 10:21:10</div>
        </div>
        <div class="item flex" v-if="obj.config.order.pay_time == 1">
          <div class="label">付款时间：</div>
          <div>2020-05-02 10:21:50</div>
        </div>
        <div class="item flex" v-if="obj.config.order.receiving_time == 1">
          <div class="label">收货时间：</div>
          <div> 2020-05-06 11:33:50</div>
        </div>
      </div>

      <div class="order-info border">
        <div class="item flex" v-if="obj.config.user.user_name == 1">
          <div class="label">用户昵称：</div>
          <div>李雷</div>
        </div>
        <div class="item flex" v-if="obj.config.user.mobile == 1">
          <div class="label"> 联系方式： </div>
          <div>13888888888 </div>
        </div>
        <!-- <div class="item flex" >
          <div class="label"> 用户等级：</div>
          <div> 黄金用户</div>
        </div> -->
      </div>

      <div class="order-info border" v-if="obj.config.user.remake == 1">
        <div class="item flex">
          <div class="label">买家留言：</div>
          <div class="bold">请尽快发货！！</div>
        </div>
      </div>

      <div class="order-info border">
        <div class="item flex" v-if="obj.config.receiving.consignee == 1">
          <div class="label">买家姓名：</div>
          <div> 韩梅梅</div>
        </div>
        <div class="item flex" v-if="obj.config.receiving.iphone == 1">
          <div class="label">联系方式：</div>
          <div>18577777777</div>
        </div>
        <div class="item flex" v-if="obj.config.receiving.address == 1">
          <div class="label">联系地址：</div>
          <div>XXX省 XXX市 XXX区 XXX街道</div>
        </div>
      </div>

      <div class="qrcode-info order-info border">
        <div class="item" v-if="obj.config.shop.qrcode == 1">
          <i class="el-sc-qrcode1" style="font-size:100px;"></i>
        </div>
        <div class="item" v-if="obj.config.shop.mobile == 1">0532-88888888</div>
        <div class="item" v-if="obj.config.shop.address == 1">XXX省 XXX市 XXX区 XXX街道</div>
      </div>

      <div class="qrcode-info order-info border">
        <div class="item">{{obj.config.bottom}}</div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name:'receiptPreview',
  data(){
    return {}
  },
  props: {
    obj: {
      type: Object,
      default: function(){
        return {};
      }
    }
  },
  components: {},
  created(){
  },
  methods:{

  }
}
</script>

<style lang="css" scoped>
.flex{
  display: flex;
}

.printer-preview {
  width: 375px;
  /* height: calc(100vh - 90px); */
  padding: 40px;
  /* overflow-y: scroll; */
  background-color: #fff;
  /* margin-right: 10px; */
  font-size: 14px;
}

.printer-preview .title {
  margin-bottom: 17px;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: #262b30;
}

.printer-preview .printer-template-content {
  padding: 20px;
  margin-top: 16px;
  background-color: #f4f6f8;
  border: 1px solid #e9edef;
  border-radius: 6px;
  color: #262b30;
}

.printer-preview .printer-template-content .top {
  text-align: center
}

.printer-preview .printer-template-content .top .shop-logo img {
  width: 108px;
  height: 57px
}

.printer-preview .printer-template-content .top .shop-name {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px
}

.printer-preview .printer-template-content .border {
  border-top: 1px dashed #b8b9bd;
}

.printer-preview .printer-template-content .goods-info-content .item,.printer-preview .printer-template-content .goods-info-price .item {
  margin-top: 12px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.printer-preview .printer-template-content .goods-info-content .item:last-child,.printer-preview .printer-template-content .goods-info-price .item:last-child {
  margin-bottom: 12px
}

.printer-preview .printer-template-content .goods-info-content .item-info.mt-12 {
  margin-top: 12px
}

.printer-preview .printer-template-content .goods-info-content .item {
  margin-top: 0
}

.printer-preview .printer-template-content .order-info .item {
  margin-top: 12px
}

.printer-preview .printer-template-content .order-info .item:last-child {
  margin-bottom: 12px
}

.printer-preview .printer-template-content .goods-info {
  margin-top: 20px
}

.printer-preview .printer-template-content .goods-info .item {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.printer-preview .printer-template-content .goods-info .item>div:first-child {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2
}

.printer-preview .printer-template-content .goods-info .item>div:nth-child(2) {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 55px;
  text-align: center
}

.printer-preview .printer-template-content .goods-info .item>div:nth-child(3) {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 83px;
  text-align: center
}

.printer-preview .printer-template-content .goods-info .item>div.price {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right
}

.printer-preview .printer-template-content .goods-info .item-title {
  margin: 10px 0
}

.printer-preview .printer-template-content .goods-info .goods-title {
  line-height: 1.5;
  font-weight: 600
}

.printer-preview .printer-template-content .order-info .item .label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 75px
}

.printer-preview .printer-template-content .qrcode-info {
  padding: 0 17px;
  text-align: center
}

.printer-preview .printer-template-content .qrcode-info .icon-haibao-erweimaneirong {
  display: block;
  margin: 0 auto;
  width: 120px;
  height: 120px;
  line-height: 120px;
  background-color: #fff;
  text-align: center;
  font-size: 105px;
  color: #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 2px
}

</style>
